<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"  isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

	<head>
		<title>Keep track of your Tumblr followers</title>
		<link rel="stylesheet" href="/static/styles.css" type="text/css"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>
	
	<body>
		<div id="main">
			<div id="header">
				<h1>Log in to your Tumblelog</h1>
				<div id="disclaimer">
					<p>THIS IS A PRE-BETA VERSION!</p>
					<p>If you register, consider yourself a tester. The site may be modified or shut down any time, and your registration may be deleted without prior warning, due to bugs, code changes etc.</p>
					<p>When you first log in with your Tumblr credentials, your followers are extracted and recorded with the actual date. From then on, the service will check your followers list every ten minutes and notice any changes.</p>
					<p>One important thing to keep in mind if you decide to register: there's no way at the moment to use OAuth to access the Tumblr followers pages, so you need to provide your Tumblr password which gets saved in our system. It's your responsibility, so you should only log in if you trust us (we're good guys though).</p>
					<p>One unpleasant side effect of using this service is that your Tumblr cookies will keep expiring and you will always get logged out from Tumblr, basically every ten minutes. It can easily happen even when you're just in the middle of posting something (but you can always use your browser's back button to get back to your post).</p>
					<p><sup><b>NEW</b></sup> The total count of your followers displayed in the header is actually the real number. The count you see on your Tumblr dashboard is most likely wrong. Count them manually, if you don't believe me :)</p>
					<p>If you still want to use it, then have fun. We appreciate any feedback or bug report, you can find our e-mail address below.</p>
				</div>
			</div>
			
			<div id="errors">
				<c:forEach items="${errors}" var="error">
					<ul>
						<li>${error}</li>
					</ul>
				</c:forEach>
			</div>
			
			<div id="message">${message}</div>
			
			<div id="form">
				<form id="login" method="post" action="/controller/editblog">
					<div class="field" id="email">
						<label for="email" class="required">Email address*</label>
						<input type="text" name="email" value="${email}" tabindex="1"/>
					</div>
					<div class="field" id="tumblelog">
						<label for="tumblelog">Tumblelog <span class="comment">(it's the name of your second, third etc. blog - leave it blank for your main tumblelog)</span></label>
						<input type="text" name="tumblelog" value="${tumblelogName}" tabindex="2"/>
					</div>
					<div class="field" id="password">
						<label for="password" class="required">Password*</label>
						<input type="password" name="password" tabindex="3"/>
					</div>
					<div class="field comment" id="comment">* Fields are required.</div>
					<div class="field" id="buttons">
						<input id="submit" type="submit" name="submit" value="OK" tabindex="4"/>
						<input id="submit" type="submit" name="submit" value="Remove" tabindex="5"/>
					</div>
				</form>
			</div>
			
			<div id="wait">
				<img src="/static/wait30trans.gif"/>
			</div>
			
			<div id="footer">
				<p>&copy;tumblarity.org, <a href="mailto:admin@tumblarity.org">admin at tumblarity.org</a></p>
			</div>
			
		</div>
		
		<script  type="text/javascript">
			$(document).ready(function() {
				$('div#wait').hide();
			});
			
			$('#submit').click(function() {
				$('div#form').fadeTo(300, 0.2, function() {
					$('div#wait').show();
					$('#login').submit();
				});
			});			
		</script>

	</body>

</html>